<template>
  <div>
    <div class="sympotoms">
      <ul class="sympotoms_common">
        <li v-for="item of sympotoms" :key="item.index">
          <img :src="item.img">
          <p>{{item.title}}</p>
        </li>
      </ul>
    </div>
    <div class="div-hr"></div>
    <!-- 儿科 -->
    <div class="header_product_hot">
      <div class="header_product_one">
        <div class="header_product_one_flex">
          <div class="header_product-span"></div>
          <div>儿科</div>
        </div>
      </div>
      <div class="header-product-two">查看更多></div>
    </div>
    <div class="product_parameter">
      <Pain-box :pain="pediatrics"></Pain-box>
    </div>
    <!-- 妇科 -->
    <div class="header_product_hot">
      <div class="header_product_one">
        <div class="header_product_one_flex">
          <div class="header_product-span"></div>
          <div>妇科</div>
        </div>
      </div>
      <div class="header-product-two">查看更多></div>
    </div>
    <div class="product_parameter">
      <Pain-box :pain="gynecology"></Pain-box>
    </div>
    <!-- 内科 -->
    <div class="header_product_hot">
      <div class="header_product_one">
        <div class="header_product_one_flex">
          <div class="header_product-span"></div>
          <div>内科</div>
        </div>
      </div>
      <div class="header-product-two">查看更多></div>
    </div>
    <div class="product_parameter">
      <Pain-box :pain="gynecology"></Pain-box>
    </div>
    <!-- 外科 -->
    <div class="header_product_hot">
      <div class="header_product_one">
        <div class="header_product_one_flex">
          <div class="header_product-span"></div>
          <div>外科</div>
        </div>
      </div>
      <div class="header-product-two">查看更多></div>
    </div>
    <div class="product_parameter">
      <Pain-box :pain="internal"></Pain-box>
    </div>
    <!-- 疼痛科 -->
    <div class="header_product_hot">
      <div class="header_product_one">
        <div class="header_product_one_flex">
          <div class="header_product-span"></div>
          <div>疼痛科</div>
        </div>
      </div>
      <div class="header-product-two">查看更多></div>
    </div>
    <div class="product_parameter">
      <Pain-box :pain="pain"></Pain-box>
    </div>
    <!-- 杂症科 -->
    <div class="header_product_hot">
      <div class="header_product_one">
        <div class="header_product_one_flex">
          <div class="header_product-span"></div>
          <div>杂症科</div>
        </div>
      </div>
      <div class="header-product-two">查看更多></div>
    </div>
    <div class="product_parameter">
      <Pain-box :pain="diseases"></Pain-box>
    </div>
  </div>
</template>

<script>
import Pain from "../shopping/homepage/pain.vue";
export default {
  components: {
    PainBox: Pain,
  },
  data() {
    return {
     pain:[],
     diseases:[],
     surgery:[],
     internal:[],
     gynecology:[],
     pediatrics:[],
     sympotoms:[]
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    getdata() {
      this.$axios.get("http://localhost:8080/abc").then(data => {
        // 导航
        this.sympotoms = data.data.sympotoms;
        //儿科
        this.pediatrics = data.data.pediatrics;
        // 妇科
        this.gynecology = data.data.gynecology;
        // 内科
        this.internal = data.data.internal;
        // 外科
        this.surgery = data.data.surgery;
        //疼痛科
        this.pain = data.data.pain;
        // 杂症科
        this.diseases = data.data.diseases;
        this.getapp();
      });
    },
    // 作为父组件传参
    getapp(){
      this.$root.bus.$emit("sympotoms",this.sympotoms);
    }
  }
};
</script>

<style scoped>
/* 导航面 */
div.sympotoms {
  padding-top:50px;
  margin: 0 auto;
}
div.sympotoms ul {
  display: flex;
  justify-content: left;
  list-style: none;
  flex-wrap: wrap;
}
div.sympotoms ul li {
  text-align: center;
  width: 25%;
  color: #404142;
}
div.sympotoms ul li img {
  border-radius: 50%;
}
div.div-hr {
  width: 100%;
  height: 12px;
  color: #ffffff;
}
div.header_product_hot {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-top: 10px;
  line-height: 24px;
  width: 95%;
  margin: 0 auto;
}
div.header_product_one {
  font-weight: 900;
}
div.header-product-two {
  font-size: 14px;
  color: #6e7975;
}
div.header_product_one_flex {
  display: flex;
}
div.header_product_one div.header_product-span {
  background: #29bf9d;
  display: inline-block;
  width: 5px;
  height: 24px;
  margin-right: 5px;
}
</style>
